<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="./jquery.min.js"></script>
    <style>
        html,body {
            height:100%;
        }
        body {
            font-family:"Microsoft Yahei";
            font-size:12px;
            margin:0;
            background:url(newBg.jpg) no-repeat;background-size:100% 100%;
        }

        ul {
            padding:0;
            margin:0;
        }
        ul li {
            list-style-type:none;
        }
        a {
            text-decoration:none;
        }
        a:hover {
            text-decoration:none;color:#f00;
        }
        input[type="text"]:focus, input[type="password"]:focus {
            outline:none;
        }
        input::-ms-clear {
            display:none;
        }
        .login {
            margin:0 auto;
            width:370px;
            border:2px solid #eee;
            border-bottom:none;
            position:relative;
        }

        .web_login {
            width:370px;
            position:relative;
        }
        #web_login{_left:60px;*left:0;}
        .web_login .login_form {
            width:272px;
            margin:0 auto;
        }
        .web_login .input-tips {
            float:left;
            margin-top:10px;
            width:50px;
            height:42px;
            font-size:16px;
            line-height:42px;
            font-family:"Hiragino Sans GB", "Microsoft Yahei";
        }
        .web_login .inputOuter {
            width:200px;
            height:42px;
            margin-top:10px;
            float:left;

        }
        .web_login .inputstyle {
            width:200px;
            height:38px;
            padding-left:5px;
            line-height:30px;line-height:38px;
            border:1px solid #D7D7D7;
            background:#fff;
            color:#333;border-radius:2px;
            font-family:Verdana, Tahoma, Arial;
            font-size:16px;
            ime-mode:disabled;
        }
        .web_login input.inputstyle2:focus,.web_login input.inputstyle:focus{border:1px solid #198BD4;box-shadow:0 0 2px #198BD4;}
        .web_login .inputstyle2 {
            width:200px;
            height:34px;
            padding-left:5px;
            line-height:34px;
            border:1px solid #D7D7D7;
            background:#fff;
            color:#333;border-radius:2px;
            font-family:Verdana, Tahoma, Arial;
            font-size:16px;
            ime-mode:disabled;
        }
        .web_login .uinArea {
            height:55px;
            position:relative;
            z-index:10;
        }
        .web_login .pwdArea {
            height:55px;
            margin-bottom:10px;
            position:relative;
            z-index:3;
        }
        .web_qr_login {
            position:relative;

            overflow:hidden;
        }

        .login {
            background-color:#ffffff;
        }

        h1{margin:0;text-align:center;color:#fff;margin-left:-25px;font-size:35px;font-weight: bold;text-shadow: 0px 1px 1px #555;padding-top: 150px}
        h1 sup{
            font-size: 18px;
            font-style: normal;
            position: absolute;
            margin-left: 10px;}
        .login {border:0;padding:5px 0;
            background: #fff;
            margin: 0 auto;
            -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
            box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);}

        .web_login{padding-bottom:20px;}
        .reg_form li {
            height: 55px;
        }
        .button_blue
        {
            display:inline-block;
            /*float:left;*/
            height:35px;border-radius:4px;
            line-height: 36px;
            background:#2795dc;border:none;cursor:pointer;
            border-bottom:3px solid #0078b3;*border-bottom:none;
            color:#fff;
            font-size:14px;padding:0 10px;*width:140px;
            text-align:center;outline:none;font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif;
        }
        input.button_blue:hover
        {
            background:#0081c1;
            border-bottom:3px solid #006698;*border-bottom:none;
            color:#fff;
            text-decoration:none;
        }
        .web_login .login_form {margin-top:30px;}
        .web_login .uinArea {
            height: 60px;}

        input::-webkit-input-placeholder {
            color: #aab2bd;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript">
        function dosubmit() {
            var result={'username':$('#u').val(),'password':$('#p').val(),'rememberMe':true};
            if($('#p').val().length<4){
                alert('密码最少为四位');
                return
            }
            $.ajax({
                url:'/api/authenticate',
                type:'POST',
                data:JSON.stringify(result),
                contentType:'application/json; charset=utf-8',
                dataType:'json',
                success:function(obj) {
                    console.log(obj);
                    sessionStorage.setItem('token',obj.id_token);
                    window.location.href = '/';
                },
                error: function(err) {
                    if (err.status == '400') {
                        var errStr = $.parseJSON(err.responseText).message;
                        alert(errStr);
                    }else if(err.status == '417'){
                        alert('用户名密码错误');
                    }
                }
            });
        }

        function goRegister() {
            window.location = 'register.html';
        }

        function enterSumbit(){
            var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异
            if (event.keyCode == 13){
                dosubmit();
            }
        }

    </script>
</head>
<body>

<h1>Bridge后台管理系统<sup>2018</sup></h1>
<input type="text" style="display:none"/>
<input type="password" style="display:none"/>
<div class="login" style="margin-top:50px;">
    <div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;">
        <!--登录-->
        <div class="web_login" id="web_login">
            <div class="login-box">
                <div class="login_form">
                    <input type="hidden" name="src" value="backend"/>
                    <input type="hidden" name="targetUrl" id="targetUrl" value="">
                    <div class="uinArea" id="uinArea">
                        <label class="input-tips" for="u">帐号：</label>
                        <div class="inputOuter" id="uArea">
                            <input type="text" id="u" name="j_username" placeholder="请输入账号" class="inputstyle"/>
                        </div>
                    </div>
                    <div class="pwdArea" id="pwdArea">
                        <label class="input-tips" for="p">密码：</label>
                        <div class="inputOuter" id="pArea">

                            <input type="password" id="p" name="j_password" class="inputstyle" placeholder="请输入密码" onkeydown="enterSumbit()"/>
                        </div>
                    </div>
                    <div style="margin-top:20px;text-align: center">
                        <input onclick="dosubmit()" type="submit" name="j_submit" value="登 录" style="width:120px;" class="button_blue"/>
                        <!--<input onclick="goRegister()" type="submit" name="j_submit" value="注 册" style="width:90px;margin-left: 28px" class="button_blue"/>-->
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

</body>
</html>
